<template>
  <h1>计算器练习</h1>
  <input type="text" placeholder="请输入数字" v-model="a">
  <input type="text" placeholder="请输入数字" v-model="b">
  <br><br>
  <button @click="f('+')">加</button>
  <button @click="f('-')">减</button>
  <button @click="f('*')">乘</button>
  <button @click="f('/')">除</button>
  <br>
  <h3>计算结果：{{result}}</h3>

</template>

<script setup>
  import {ref} from "vue";

  const a = ref('');
  const b = ref('');
  const result = ref('');
  const f = (o)=>{
    //响应式变量在JS中使用必须.value eval函数会将字符串形式的算式(如:eval('5*2'))自动进行JS计算
    result.value = eval(a.value+o+b.value)
  }
</script>


<style scoped>

</style>